<template>
  <div>
    <!-- 面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>锡膏管理</el-breadcrumb-item>
      <el-breadcrumb-item>锡膏特采</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row>
        <!-- :gutter="10"-->
        <el-col :span="7">
          <!-- 搜索添加区域-->
          <el-input placeholder="请输入特采单号或者锡膏料号"
                    v-model='queryInfo.query'
                    :clearable='true'
                    @clear='getSpecialBuyList'>
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="getSpecialBuyList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加锡膏特采单</el-button>
        </el-col>
      </el-row>

      <!--用户列表区域-->
      <el-table :data="solderPasterSpecialList"
                :border="true"
                :stripe="true"
                :header-cell-style="{'text-align':'center','font-weight':'700','color':'#606266'}"
                :cell-style="{'text-align':'center'}"
                :row-key="getRowKeys"
                :expand-row-keys="expands"
                @expand-change="expandChange">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.SolderPasteUsedList"
                      style="width: calc(100% - 47px)"
                      :border="true"
                      :stripe="true"
                      :header-cell-style="{'text-align':'center','font-weight':'700','color':'#606266'}"
                      :cell-style="{'text-align':'center'}">
              <el-table-column type="index">
              </el-table-column>
              <el-table-column label="锡膏Reel No"
                               prop="SolderPasteReelNo"></el-table-column>
              <el-table-column label="锡膏D/C"
                               prop="SolderPasteDC"></el-table-column>
              <el-table-column label="供应商"
                               prop="SolderPasteVendor"></el-table-column>
              <el-table-column label="过期时间"
                               prop="SolderPasteEffectiveDate"
                               :formatter="dateFormat"></el-table-column>
            </el-table>

            <el-pagination v-if="scope.row.SolderPasteUsedList.length>0==true"
                           background
                           :page-size="scope.row.pageSizeChild"
                           :page-sizes="[5,10,20,50]"
                           :current-page="scope.row.pageNumChild"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="scope.row.resTotalChild"
                           @current-change="handleCurrentPageChangeChild($event,scope.$index)"
                           @size-change="handleSizeChangeChild($event,scope.$index)"></el-pagination>
          </template>
        </el-table-column>
        <el-table-column type="index">
        </el-table-column>
        <el-table-column label="特采单号"
                         prop="SpecialBuyID"></el-table-column>
        <el-table-column label="锡膏料号"
                         prop="SolderPasterPartNo"></el-table-column>
        <el-table-column label="特采预估数量"
                         prop="SolderPasterTargetQty"></el-table-column>
        <el-table-column label="已入数量"
                         prop="SolderPasterReceivedQty"></el-table-column>
        <el-table-column label="创建人员"
                         prop="CreateBy"></el-table-column>
        <el-table-column label="创建时间"
                         prop="CreateTime"
                         :formatter="dateFormat"></el-table-column>
        <el-table-column label="是否关闭">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.Effective"
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="180px;">
          <template slot-scope="scope">
            <!--修改-->
            <el-tooltip content="修改锡膏特采信息"
                        placement="bottom"
                        effect="light"
                        :enterable="false">
              <el-button type="primary"
                         icon="el-icon-edit"
                         size="mini"
                         @click="editSolderPasteSpecialBuy(scope.row.SpecialBuyID)">
              </el-button>
            </el-tooltip>
            <!--删除-->
            <el-tooltip content="删除锡膏特采信息"
                        placement="bottom"
                        effect="light"
                        :enterable="false">
              <el-button type="danger"
                         icon="el-icon-delete"
                         size="mini">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryInfo.pagenum"
                     :page-sizes="[5,10,20,50]"
                     :page-size="queryInfo.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     background>
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      expands: [], // 只展开一行放入当前行id
      getRowKeys: (row) => {
        return row.SpecialBuyID // 这里看这一行中需要根据哪个属性值是id
      },
      total: 0,
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      solderPasterSpecialList: []
    }
  },
  created () {
    console.log('执行created')
    this.getSpecialBuyList()
  },
  methods: {
    searchSpecialBuyList () {

    },
    // 展开row事件
    expandChange (row, rowList) {
      var that = this
      if (rowList.length) {
        that.expands = []
        if (row) {
          that.expands.push(row.SpecialBuyID)// 只展开当前行id
          // 先根据specialbuyID从后台获取绑定的锡膏
          const index = that.solderPasterSpecialList.findIndex(data => data.SpecialBuyID === row.SpecialBuyID) // 父分组的下标
          that.$set(that.solderPasterSpecialList[index], 'pageNumChild', 1)
          that.$set(that.solderPasterSpecialList[index], 'pageSizeChild', 5)
          // 根据specialBuyID找到下面已经录入的所有锡膏。先Moke数据
          that.getSubTableData(row)
          // that.solderPasterSpecialList.forEach(function (value, index, array) {
          //   if (value.SpecialBuyID === row.SpecialBuyID) {
          //     value.SolderPasteUsedList.push({
          //       SolderPasteReelNo: '12345',
          //       SolderPasteDC: '1234',
          //       SolderPasteVendor: '3123',
          //       SolderPasteEffectiveDate: '31231'
          //     })
          //   }
          // })
        }
      } else {
        that.expands = []
      }
    },
    getSubTableData (row) {
      const that = this
      const index = that.solderPasterSpecialList.findIndex(data => data.SpecialBuyID === row.SpecialBuyID) // 父分组的下标
      const params = {
        SpecialBuyID: row.SpecialBuyID,
        pageNum: row.pageNumChild,
        pageSize: row.pageSizeChild
      }
      this.$http.post('/ProductManagment/SolderPasteSpecial/GeneralSoldePasteRecord', params).then(respData => {
        console.log(respData)
        if (respData.data.meta.status === 200) {
          that.$set(that.solderPasterSpecialList[index], 'SolderPasteUsedList', respData.data.data.SolderPasteUsedList)
          that.$set(that.solderPasterSpecialList[index], 'resTotalChild', respData.data.data.Total)
        } else {
          that.$set(that.solderPasterSpecialList[index], 'resTotalChild', 0)
        }
      })
    },
    // 获取特采清单list
    async getSpecialBuyList () {
      const { data: res } =
        await this.$http.post('/ProductManagment/SolderPasteSpecial/SearchSpecialBuyList', this.queryInfo)
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('获取锡膏特采List失败')
      }
      this.solderPasterSpecialList = res.data.SolderPasteUsedList
      this.total = res.data.Total
    },
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getSpecialBuyList()
    },
    handleCurrentChange (val) {
      this.queryInfo.pagenum = val
      this.getSpecialBuyList()
    },
    handleCurrentPageChangeChild (val, index) {
      console.log(index)
      this.$set(this.solderPasterSpecialList[index], 'pageNumChild', val)
      this.getSubTableData(this.solderPasterSpecialList[index])
    },
    handleSizeChangeChild (val, index) {
      this.$set(this.solderPasterSpecialList[index], 'pageSizeChild', val)
      this.getSubTableData(this.solderPasterSpecialList[index])
    },
    // 修改锡膏状态动作
    editSolderPasteSpecialBuy (specialBuyID) {
      console.log(specialBuyID)
    },
    // 修改时间格式
    dateFormat (row, column, cellValue, index) {
      const daterc = row[column.property]
      if (daterc != null) {
        const dateMat = new Date(daterc) // parseInt(daterc.replace('/Date(', '').replace(')/', ''), 10)
        const year = dateMat.getFullYear()
        const month = dateMat.getMonth() + 1
        const day = dateMat.getDate()
        const hh = dateMat.getHours()
        const mm = dateMat.getMinutes()
        const ss = dateMat.getSeconds()
        const timeFormat = year + '-' + month.toString().PadLeft(2, '0') + '-' + day.toString().PadLeft(2, '0') +
          ' ' + hh.toString().PadLeft(2, '0') + ':' + mm.toString()
            .PadLeft(2, '0') + ':' + ss.toString().PadLeft(2, '0')
        return timeFormat
      }
    }
  }
}

</script>

<style lang="less" scoped>
</style>
